<template>
  <div>
    <div class="header-btn">
      <div>群欢迎语详情</div>
      <div>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header" style="margin-left: 0">基础详情</div>
      <div style="margin-left: 14px">
        <span>群发名称：</span>
        <span>{{ welcomeName }}</span>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header" style="margin-left: 0">欢迎语设置</div>
      <div class="show-txt">
        <span class="show-txt-title">文本内容:</span>
        <span class="show-txt-content">{{form.welcomeMsg}}</span>
      </div>
      <div class="show-txt">
        <span class="show-txt-title">选择素材：</span>
        <div class="show-txt-content" style="margin: -6px 0 0 0;">
          <NormalSelectMaterial v-if="operateFlag" :selectedList="form.mediaContentDetails" :disabled="true" />
        </div>
      </div>
      <div class="show-txt">
        <span class="show-txt-title">二维码：</span>
        <div class="show-txt-content" v-show="qrCodeForm.activityName">
          {{` ${['员工活码', '渠道活码', '群活码'][qrCodeForm.qrType]} : ${qrCodeForm.activityName}` }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { editInfo } from '@/api/groupGreet'

export default {
  name: 'addDispatch',
  data() {
    return {
      welcomeName: '', // 任务名称
      total: 0,
      form: {
        // 基础设置
        welcomeMsg: '',
        mediaContentDetails: [],
        codeState: '',
      },
      operateFlag: '',
      qrCodeForm: {},
    }
  },
  mounted() {
    this.editInfo()
  },
  methods: {
    // 初始化查询
    editInfo() {
      editInfo({ id: this.$route.query.id }).then((res) => {
        if (res.code == 200) {
          this.welcomeName = res.data.welcomeName
          this.form = res.data
          if (res.data.codeState == '0') {
            this.qrCodeForm = res.data.messageCode[0]
          }
          this.operateFlag = 'DETAIL'
        }
      }).catch(() => {})
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../styles/base.scss';

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.show-txt {
  display: flex;
  margin: 0 20px 12px 20px;
  .show-txt-title {
    white-space: nowrap;   
  }
  .show-txt-content {
    margin-left: 10px;
  }
}

.seletedCode {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2a2a2a;
  margin: 0 !important;
  display: inline-block;
}
</style>
